import React from 'react';
import { Icon, Divider } from 'antd';
import Previewer from '../Previewer';
import { download, canPreview } from '../utils';
import styles from './index.less';

const validateUrl = url => /^https?:/.test(url);

const FileList = ({ fileList = [], showButton = {}, onDelete, emptyText }) => {
    const previewRef = React.useRef();

    const renderButtons = React.useCallback(
        file => {
            const buttons = [
                {
                    key: 'preview',
                    validator: () => validateUrl(file.url) && canPreview(file.name),
                    component: (
                        <Icon
                            className={styles.button}
                            type="eye"
                            onClick={() => {
                                previewRef.current.show(file.name, file.url);
                            }}
                        />
                    )
                },
                {
                    key: 'download',
                    validator: () => validateUrl(file.url),
                    component: (
                        <Icon
                            className={styles.button}
                            type="download"
                            onClick={() => {
                                download(file.url, file.name);
                            }}
                        />
                    )
                },
                {
                    key: 'delete',
                    component: (
                        <Icon
                            className={styles.button}
                            type="delete"
                            onClick={() => {
                                if (onDelete) onDelete(file);
                            }}
                        />
                    )
                }
            ];

            // 过滤掉不显示的
            const filterButtons = buttons.filter(item => {
                // 配置
                const showKeys = Object.keys(showButton);
                // 是否有其他的基础校验
                if (item.validator) {
                    return item.validator();
                }

                if (showKeys.includes(item.key)) {
                    return showButton[item.key];
                }
                return true; // 默认显示
            });

            return filterButtons.map((item, index) => (
                <div key={item.key} style={{ display: 'flex', alignItems: 'center' }}>
                    {item.component}
                    {index !== filterButtons.length - 1 && (
                        // 不包一个div无法垂直居中...
                        <div>
                            <Divider type="vertical" />
                        </div>
                    )}
                </div>
            ));
        },
        [showButton, onDelete]
    );

    if (!fileList.length) {
        return emptyText;
    }

    return (
        <>
            {fileList.map(item => (
                <div className={styles.wrap} key={item.uid}>
                    <div className={styles.file}>
                        <Icon type="paper-clip" />
                        <span
                            title={item.name}
                            className={styles.fileName}
                            onClick={() => {
                                download(item.url, item.name);
                            }}
                        >
                            {item.name}
                        </span>
                    </div>
                    <div className={styles.buttonWrap}>{renderButtons(item)}</div>
                </div>
            ))}
            <Previewer ref={previewRef} />
        </>
    );
};

export default FileList;
